import {
  Button,
  Descriptions,
} from 'antd';
import { PageHeaderWrapper, RouteContext } from '@ant-design/pro-layout';
import React, { Component, Fragment } from 'react';
import { connect, history } from 'umi';
import moment from 'moment';
import styles from './style.less';
import Info from './info'
import Order from './order'
import Body from './body'
import Score from './score'
import Lesson from './lesson'
import {HasPermission} from '@/components/AuthComponent/HasPermission';
const AuthButton = HasPermission(Button);

class Advanced extends Component {
  state = {
    tabActiveKey: 'vipInfo',
  };

  componentDidMount() {
    const { dispatch,match } = this.props;
    dispatch({
      type: 'cubeVip/fetchVip',
      payload:{
        id:match.params.id
      }
    });
    dispatch({
      type: 'cubeVip/getMemberCard',
      payload:{
        memberId:match.params.id
      }
    });
  }

  /**
   * tab切换
   */
  onTabChange = tabActiveKey => {
    this.setState({
      tabActiveKey,
    });
  };

  /**
   * 去编辑
   */
  goToEdit = () =>{
    const { match } = this.props;
    history.push(`/vip/center/update/${match.params.id}`);
  }

  /**
   * 去绑卡
   */
  goToBindCard = () =>{
    const { match } = this.props;
    history.push({
      pathname:`/vip/bind-card/save`,
      query:{memberId:match.params.id}
    })
  }

  render() {
    const {  tabActiveKey } = this.state;
    const { currentVip,vipCardList } = this.props
    const action = (
      <RouteContext.Consumer>
        {({ }) => {
          return (
            <>
              <AuthButton auth={[`vip:update`]} onClick={()=>this.goToEdit()}>编辑</AuthButton>
              <AuthButton auth={[`vip:bind:card:add`]} type="primary" onClick={()=>this.goToBindCard()}>绑卡</AuthButton>
            </>
          );
        }}
      </RouteContext.Consumer>
    );
    const description = (
      <RouteContext.Consumer>
        {({ isMobile }) => (
          <Descriptions className={styles.headerList} size="small" column={isMobile ? 1 : 2}>
            <Descriptions.Item label="名称">{currentVip.name||'未设置'}</Descriptions.Item>
            <Descriptions.Item label="昵称">{currentVip.nickname||'未设置'}</Descriptions.Item>
            <Descriptions.Item label="教练">{currentVip.coachName?currentVip.coachName:"未设置"}</Descriptions.Item>
            <Descriptions.Item label="销售">{currentVip.salesName?currentVip.salesName:"未设置"}</Descriptions.Item>
            <Descriptions.Item label="积分">{currentVip.integralBalance||0}</Descriptions.Item>
            <Descriptions.Item label="创建时间">{currentVip.createTime?moment(currentVip.createTime).format('YYYY-MM-DD HH:mm:ss'):""}</Descriptions.Item>
          </Descriptions>
        )}
      </RouteContext.Consumer>
    );
    return (
      <PageHeaderWrapper
        extra={action}
        className={styles.pageHeader}
        content={description}
        tabActiveKey={tabActiveKey}
        onTabChange={this.onTabChange}
        tabList={[
          {
            key: 'vipInfo',
            tab: '会员卡信息',
          },
          {
            key: 'vipOrder',
            tab: '消费记录',
          },
          {
            key: 'vipBody',
            tab: '体测信息',
          },
          {
            key: 'vipLesson',
            tab: '预课记录',
          },
          {
            key: 'vipScore',
            tab: '积分信息',
          },
        ]}
      >
        <div className={styles.main}>
          {
            tabActiveKey=='vipInfo'&&<Info currentVip={currentVip} vipCardList={vipCardList} id={this.props.match.params.id}/>
          }
          {
            tabActiveKey=='vipOrder'&&<Order id={this.props.match.params.id}/>
          }
          {
            tabActiveKey=='vipBody'&&<Body id={this.props.match.params.id}/>
          }
          {
            tabActiveKey=='vipScore'&&<Score id={this.props.match.params.id}/>
          }
          {
            tabActiveKey=='vipLesson'&&<Lesson id={this.props.match.params.id}/>
          }
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default connect(({ cubeVip, loading }) => ({
  currentVip:cubeVip.currentVip,
  vipCardList:cubeVip.vipCardList,
  loading: loading.effects['cubeVip/fetchVip'],
}))(Advanced);
